<template>
  <el-dialog
    title="车辆信息"
    :visible.sync="dialogVisible3"
    width="30%"
    :before-close="handleClose3"
  >
    <el-descriptions>
      <el-descriptions-item label="编号">{{ this.no }}</el-descriptions-item
      ><br />
      <el-descriptions-item label="车牌颜色">{{
        this.color || "无"
      }}</el-descriptions-item>
      <el-descriptions-item label="使用状态">{{
        this.state
      }}</el-descriptions-item>
      <el-descriptions-item label="电量(%)">{{
        this.battery || "无"
      }}</el-descriptions-item>
      <el-descriptions-item label="累计使用时(h)">{{
        this.cumlative_usage_time || "无"
      }}</el-descriptions-item>
      <el-descriptions-item label="月使用次数">{{
        this.monthly_usage_times || "无"
      }}</el-descriptions-item>
    </el-descriptions>

    <span slot="footer" class="dialog-footer">
      <el-button-group>
        <el-button
          type="primary"
          @click="
            editfalse();
            showPath();
          "
          >路径</el-button
        >
        <el-button
          type="primary"
          @click="
            editfalse();
            showDestination();
          "
          >导航</el-button
        >
        <el-button type="primary" @click="this.editfalse">关闭</el-button>
        <el-button type="danger" @click="deleteV" :disabled="disabled"
          >删除</el-button
        >
      </el-button-group>
    </span>
  </el-dialog>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  name: "show_info",
  data() {
    return {
      disabled: false,
    };
  },

  props: [
    "id",
    "no",
    "color",
    "state",
    "battery",
    "cumlative_usage_time",
    "monthly_usage_times",
  ],

  mounted() {
    this.$nextTick(() => {
      this.$axios({
        method: "post",
        url: `/user/login/?username=${localStorage.getItem(
          "username"
        )}&password=${localStorage.getItem("pwd")}`,
      }).then((res2) => {
          console.log(res2);
          if (res2.data.power === "普通用户") {
            this.disabled = true;
          } else {
            this.disabled = false;
          }
        });
      
    });
  },

  methods: {
    ...mapMutations([
      "edittrue",
      "editfalse",
      "showPathTrue",
      "showPathFalse",
      "showDestinationTrue",
      "showDestinationFalse",
    ]),
    handleClose3(done) {
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
      done();
    },

    showPath() {
      this.showPathTrue();

      setTimeout(() => {
        this.showPathFalse();
      }, 500);
    },

    showDestination() {
      this.showDestinationTrue();

      setTimeout(() => {
        this.showDestinationFalse();
      }, 500);
    },

    deleteV() {
      if (this.battery) {
        console.log(this.id);
        this.$axios({
          method: "get",
          url: `/deleteSharedEbike?sebId=${this.id}`,
        })
          .then((res) => {})
          .catch((error) => {});
        // console.log('ebike');
      } else {
        console.log(this.id);
        this.$axios({
          method: "get",
          url: `/deleteSharedBike?sbId=${this.id}`,
        })
          .then((res) => {})
          .catch((error) => {});
        // console.log(this.id);
        // console.log('bike');
      }

      setTimeout(() => {
        window.location.reload();
      }, 500);
    },
  },

  computed: {
    ...mapState(["dialogVisible3"]),

    dialogVisible3: {
      get() {
        return this.$store.state.dialogVisible3;
      },
      set(val) {
        this.editfalse();
      },
    },
  },
};
</script>

<style>
</style>